<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot-插槽的基本使用</title>
</head>
<body>
<div id="app">
  <!--1、插槽的基本使用：在组件中使用<slot></slot>预留出扩展位置，然后在使用组件的时候插入要用的标签元素-->
  <!--2、插槽的默认值：在组件声明插槽slot时，可以在插槽中写好默认值,当实例中使用组件时，如果没有插入扩展元素，那么将会展示默认值-->
  <!--3、如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素-->
  <cpn><p>这是在插槽中扩展的元素</p></cpn>
  <hr>
  <cpn></cpn>
  <hr>
  <cpn>
    <p>哈哈哈</p>
    <div>呵呵呵</div>
    <span>咚咚咚</span>
  </cpn>

</div>
<template id="cpn">
  <div>
    <h2>这是标题</h2>
    <p>这是内容</p>
    <slot><button>按钮</button></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template:'#cpn'
  }
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    components:{
      cpn:cpn
    }
  });
</script>
</body>
</html>
